<template>
	<view class="resiger">
		<view class="img-holder" v-if="userData.icon" @tap="uploadImg">
			<image :src="userData.icon"></image>
		</view>
		<view class="img-holder" v-else @tap="uploadImg">
			<image src="/static/icons/leju-logo.png"></image>
		</view>

		<view class="input-holder">
			<view class="input">
				<input type="text" v-model="userData.phone" placeholder="请输入手机号" />
			</view>
			<view class="input">
				<input type="text" v-model="userData.username" placeholder="请输入用户名" />
			</view>
			<view class="input">
				<input type="text" v-model="userData.nickname" placeholder="请输入昵称" />
			</view>
			<view class="input password">
				<template v-if="passwordShow">
					<view>
						<input type="text" v-model="userData.password" placeholder="请输入新密码" />
						<image src="/static/icons/view.png" mode="" @tap="changePasswordShow"></image>
					</view>
				</template>
				<template v-else>
					<view>
						<input type="password" v-model="userData.password" placeholder="请输入密码" />
						<image src="/static/icons/no-view.png" mode="" @tap="changePasswordShow"></image>
					</view>
				</template>
			</view>
			<view class="input code">
				<input type="text" placeholder="验证码" />
				<view :class="{disable:isDisable}" class="text" @tap="getCode">
					{{codeText}}
				</view>
			</view>
		</view>

		<view class="login-btn" @tap="register">
			注册
		</view>
	</view>
</template>

<script>
	import {
		requestRegister
	} from 'api/user/login.js';
	export default {
		data() {
			return {
				imgUrl: '',
				userData: {
					username: '',
					password: '',
					phone: '',
					icon: '',
					nickname: '',
				},
				passwordShow: false,
				codeText: '获取验证码',
				isDisable: false,
			};
		},
		methods: {
			// 上传图片
			uploadImg() {
				const _self = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						const tempFilePaths = res.tempFilePaths;
						const uploadTask = uni.uploadFile({
							url: 'https://leju.bufan.cloud/lejuClient/login/uploadAvatar',
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'user': 'test'
							},
							success: function(uploadFileRes) {
								uni.showToast({
									title: "上传头像成功",
									icon: 'success'
								})
								let res = JSON.parse(uploadFileRes.data)
								console.log(res);
								_self.userData.icon = res.data.fileUrl;
							}
						});
					},
					error: function(e) {
						console.log(e);
					}
				});
			},
			// 改变密码显示状态
			changePasswordShow() {
				this.passwordShow = !this.passwordShow;
			},
			// 获取验证码
			getCode() {
				if ((/^1[3456789]d{9}$/.test(this.userData.phone))) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none',
						duration: 2000
					})

					return false;
				} else {
					if (this.isDisable) {
						return false;
					}
					uni.showToast({
						title: '模拟验证码倒计时',
						icon: 'none',
						duration: 2000
					})
					let num = 30;
					this.isDisable = true;
					let timer = setInterval(() => {
						if (num <= 0) {
							this.codeText = '获取验证码';
							this.isDisable = false;
							clearInterval(timer);
							return
						}
						this.codeText = num--;
					}, 1000)
				}
			},
			// 点击注册

			register() {
				if (this.userData.username && this.userData.password) {
					if ((/^1[3456789]d{9}$/.test(this.userData.phone))) {
						uni.showToast({
							title: '请输入正确的手机号',
							icon: 'none',
							duration: 2000
						})

						return false;
					}
					requestRegister(this.userData).then(res => {
						console.log(res);
						if(res.code === 20000){
							uni.showToast({
								title: '注册成功，在1s后跳转到登录界面',
								icon: 'success',
								duration: 1000
							})
							
							setTimeout(()=>{
								uni.navigateTo({
									url:'/pages/user/login/login'
								})
							},1000)
						}else{
							uni.showToast({
								title: res.message,
								icon: 'none',
								duration: 1000
							})
						}
					})
				} else {
					uni.showToast({
						title: '用户名和密码不能为空',
						icon: 'none',
						duration: 2000
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.resiger {
		box-sizing: border-box;
		padding: 0 70rpx;
		min-height: 100vh;
		width: 100%;

		.img-holder {
			margin: 0 auto;
			margin-top: 100rpx;
			width: 160rpx;
			height: 160rpx;
			border-radius: 50%;
			overflow: hidden;
			box-shadow: 0 0 60rpx 0 rgba(0, 0, 0, .1);

			image {
				width: 100%;
				height: 100%;
			}
		}

		.input-holder {
			margin-top: 100rpx;

			.input {
				position: relative;

				input {
					box-sizing: border-box;
					margin-top: 32rpx;
					padding: 32rpx;
					height: 100rpx;
					width: 100%;
					border-radius: 50rpx;
					box-shadow: 0 0 30px 0 rgba(43, 86, 112, .1);
				}
			}

			.password {
				image {
					position: absolute;
					display: block;
					width: 50rpx;
					height: 32rpx;
					right: 36rpx;
					top: 36rpx;
				}
			}

			.code {
				.text {
					position: absolute;
					display: block;
					height: 32rpx;
					right: 36rpx;
					font-size: 24rpx;
					top: 36rpx;
				}

				.disable.text {
					color: #999;
				}
			}
		}

		.login-btn {
			box-sizing: border-box;
			margin-top: 100rpx;
			padding: 32rpx;
			height: 100rpx;
			width: 100%;
			font-size: 32rpx;
			color: rgb(255, 255, 255);
			border-radius: 50rpx;
			box-shadow: 0 0 30px 0 rgba(43, 86, 112, .1);
			background: rgb(53, 78, 68);
			text-align: center;
		}

		.login-btn {
			box-sizing: border-box;
			margin-top: 100rpx;
			padding: 32rpx;
			height: 100rpx;
			width: 100%;
			font-size: 32rpx;
			color: rgb(255, 255, 255);
			border-radius: 50rpx;
			box-shadow: 0 0 30px 0 rgba(43, 86, 112, .1);
			background: rgb(53, 78, 68);
			text-align: center;
		}

	}
</style>
